<template>
	<view class="wrap">
		<view class="task-header">
			<view class="task-icon">
				📝
			</view>
			<view class="task-info">
				<view class="task-date">{{homework.jobName}}</view>
				<view class="task-finish">0/{{homework.classMemberCount}} 人完成</view>
				<view class="task-share">分享作业</view>
			</view>
			<view class="task-ops">
				<text class="edit-text">修改作业</text>
				<text class="edit-text">删除</text>
			</view>
		</view>
		<view class="tabs">
			<view class="tab-item active">已完成(0人)</view>
			<view class="tab-item">未完成({{homework.classMemberCount}}人)</view>
		</view>
		<view class="task-content">
			<view class="task-item">
				<!-- <image class="task-item-icon" src="/static/family-icon.png"></image> -->
				<view class="task-item-info">
					<view class="task-item-title">My Family</view>
					<view class="task-item-status">未配音</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as ClassApi from '@/api/class.js'
	
	export default {
		data() {
			return {
				homeworkId: '',
				homework:{}
			}
		},
		onLoad(option) {
			this.homeworkId = option.homeworkId
			this.getAssignmentDetailsById()
		},
		methods: {
			async getAssignmentDetailsById(){
				const resp = await ClassApi.getAssignmentDetailsById({
					id : this.homeworkId.trim()
				})
				if(resp.code === 0 && resp.data){
					this.homework = resp.data
				}
			},
		}
	}
</script>

<style>
	.wrap {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.task-header {
		display: flex;
		align-items: center;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 15rpx;
		justify-content: space-between;
	}

	.task-icon {
		width: 100rpx;
		height: 120rpx;
		background-color: #4FC3F7;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 40rpx;
		margin-right: 24rpx;
	}

	.task-info {
		flex: 1;
		margin-left: 10rpx;
	}

	.task-date {
		font-size: 32rpx;
		font-weight: bold;
		color: #000;
	}

	.task-finish {
		font-size: 26rpx;
		color: #666;
		margin-top: 5rpx;
	}

	.task-share {
		font-size: 26rpx;
		color: #409eff;
		margin-top: 5rpx;
	}

	.task-ops {
		display: flex;
		align-items: center;
	}

	.edit-icon,
	.del-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 5rpx;
	}

	.edit-text {
		font-size: 26rpx;
		margin-right: 20rpx;
		color: #666;
	}

	.tabs {
		display: flex;
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 20rpx 0;
		font-size: 28rpx;
		color: #333;
	}

	.tab-item.active {
		color: #409eff;
		border-bottom: 4rpx solid #409eff;
	}

	.task-content {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-top: 20rpx;
	}

	.task-item {
		display: flex;
		align-items: center;
	}

	.task-item-icon {
		width: 120rpx;
		height: 120rpx;
	}

	.task-item-info {
		margin-left: 20rpx;
	}

	.task-item-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #000;
	}

	.task-item-status {
		background-color: #ebebeb;
		padding: 10rpx 20rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
		display: inline-block;
	}
</style>